<template>
	<view>
		<!-- <view style="margin-left: 223rpx;margin-top: 20rpx;">
			<uploader />
		</view> -->
		<view class="install-container" style="margin-bottom: 30rpx;">
		
			<!-- 用户信息 -->
			<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
			这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
			<uni-forms :value="params['个体诊所']" ref="form" validateTrigger="bind" class="word5">
				<uni-forms-item required label="诊所名称：" name="诊所名称">
					<input maxlength="50" placeholder="请输入诊所名称" v-model="params['个体诊所']['诊所名称']" @input="binddata('诊所名称',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="经营者姓名：" name="负责人">
					<input maxlength="18" v-model="params['个体诊所']['负责人']" placeholder="请输入经营者姓名" @input="binddata('负责人',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="联系电话：" name="联系电话">
					<input maxlength="18" v-model="params['个体诊所']['联系电话']" placeholder="请输入负责人联系电话" @input="binddata('联系电话',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="房东姓名：" name="房东姓名">
					<input maxlength="50" placeholder="请输入房东姓名" v-model="params['个体诊所']['房东姓名']" @input="binddata('房东姓名',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="房东电话：" name="房东电话">
					<input maxlength="18" placeholder="请输入房东电话" v-model="params['个体诊所']['房东电话']" @input="binddata('房东电话',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="诊所地址：" name="地址">
					<choose-address @location="getLocation" placeholder="请输入诊所地址" v-model="params['个体诊所']['地址']" @input="binddata('地址',$event)"></choose-address>
				</uni-forms-item>
				<uni-forms-item required name="消防重点关注对象" label="消防重点对象：">
					<uni-data-checkbox v-model="params['个体诊所']['消防重点关注对象']" :localdata="status"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item required name="是否有医师执业证" label="有医师执业证：">
					<uni-data-checkbox v-model="params['个体诊所']['是否有医师执业证']" :localdata="status1"></uni-data-checkbox>
				</uni-forms-item>
				<!-- <uni-forms-item v-if="params['个体诊所']['是否有医师执业证'] == '1'" required name="医师执业证编号" label="医师执业证编号：">
					<view>
						<view class="num-add-btn" @click="showModal = true">添加</view>
					</view>
				</uni-forms-item> -->
				<uni-forms-item required label="社会信用代码：" name="统一社会信用代码">
					<input maxlength="18" v-model="params['个体诊所']['统一社会信用代码']" placeholder="请输入社会信用代码" @input="binddata('统一社会信用代码',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="资质有效期开始" name="资质有效期开始时间">
					<date-picker v-model="params['个体诊所']['资质有效期开始时间']" placeHolder="经营资质有效期开始时间" @input="binddata('资质有效期开始时间',$event)"></date-picker>
				</uni-forms-item>
				<uni-forms-item required label="资质有效期结束" name="资质有效期结束时间">
					<date-picker v-model="params['个体诊所']['资质有效期结束时间']" placeHolder="经营资质有效期结束时间" @input="binddata('资质有效期结束时间',$event)"></date-picker>
				</uni-forms-item>
				<uni-forms-item label="营业执照照片" name="营业执照照片">
					<upload :max="1" v-model="params['个体诊所']['营业执照照片']" />
				</uni-forms-item>
				<uni-forms-item label="成立时间：" name="成立时间">
					<date-picker placeHolder="请填写成立时间" v-model="params['个体诊所']['成立时间']"></date-picker>
				</uni-forms-item>
				<uni-forms-item label="场所面积：" name="工作区域面积">
					<input maxlength="18" placeholder="请输入场所面积" v-model="params['个体诊所']['工作区域面积']">
				</uni-forms-item>
				<uni-forms-item label="从医人员数量：" name="从医人员数量">
					<input type="number" placeholder="请输入从医人员数量：" v-model="params['个体诊所']['从医人员数量']">
				</uni-forms-item>	
				<!-- <uni-forms-item required label="具体位置：" name="roomIds">
					<uni-combox placeholder="请选择房屋" @input="binddata('roomIds',$event)" :candidates="candidates" v-model="resident.roomIds"></uni-combox>
				</uni-forms-item> -->
				<uni-forms-item label="备注信息：" name="备注">
					<input placeholder="请输入备注信息" v-model="params['个体诊所']['备注']">
				</uni-forms-item>
				<uni-forms-item>
					<facility-info></facility-info>
				</uni-forms-item>
				<button class="grid-btn" @click="submitForm">提交</button>
			</uni-forms>
		</view>
		<!-- 模态框 -->
		<van-dialog use-slot title="医师执业证" cancel-button-text="关闭" :before-close="handleClose" :show="showModal" show-cancel-button>
			<view class="dialog-content">
				<view>请输入证件号:</view>
				<view class="num-box">
					<view class="num-item" v-for="(item, index) in params['个体诊所']['医师执业证编号']" :key="index">
						<text>{{item}}</text>
						<text class="delete" @click="deleteNum(index)">删除</text>
					</view>
				</view>
				<view class="input-box">
					<input v-model="numItem" type="text" value="" />
					<view class="add-btn" @click="addNumber">添加</view>
				</view>
			</view>
		</van-dialog>
	</view>
</template>

<script>
	import upload from './upload.vue'
	import uploader from '../myComponents/image-uploader.vue'
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from './lb-picker/index.vue'
	import FacilityInfo from './facilityInfo.vue'
	import ChooseAddress from '../myComponents/chooseAddress.vue'
	import vanDialog from '@/wxcomponents/vant/dist/dialog'
	import dayjs from 'dayjs'
	var that;
	export default {
		components: {
			upload,
			vanDialog,
			uploader,
			DatePicker,
			LbPicker,
			ChooseAddress
		},
		data() {
			return {
				numItem: '',
				showModal: false,
				label: '请选择设施类型',
				installTypeList: this.$type.installTypeList,
				params: {
					所属网格id: null,
					lagitude: null,
					longitude: null,
					检查点类型: 'clinic',
					个体诊所: {
						诊所名称: null,		
						负责人: null,
						联系电话: null,
						房东姓名: null,
						房东电话: null,
						从医人员数量: null,
						工作区域面积: null,
						成立时间: null,
						地址	: null,
						资质有效期开始时间: null,
						资质有效期结束时间: null,
						营业执照照片: [],
						是否有医师执业证: null,
						医师执业证编号: [],
						消防重点关注对象: null,
						备注	: null,
						照片上传: null	
					}
				},
				status: [{
						text: '是',
						value: true
					},
					{
						text: '否',
						value: false
					}
				],
				status1: [{
					text: '是',
					value: '1'
				},{
					text: '否',
					value: '2'
				}],
				//表单验证规则
				rules: {
					诊所名称: {
						rules: [{
							required: true,
							errorMessage: '请输入诊所名称',
						}]
					},
					统一社会信用代码: {
						rules: [{
							required: true,
							errorMessage: '请输入社会信用代码',
						}]
					},
					负责人: {
						rules: [{
							required: true,
							errorMessage: '请输入经营者姓名',
						}, ]
					},
					联系电话: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						}, ]
					},
					房东姓名: {
						rules: [{
							required: true,
							errorMessage: '请输入房东姓名',
						}, ]
					},
					房东电话: {
						rules: [{
							required: true,
							errorMessage: '请输入房东电话',
						}, ]
					},
					地址: {
						rules: [{
							required: true,
							errorMessage: '请输入诊所地址'
						}]
					},
					消防重点关注对象: {
						rules: [{
							required: true,
							errorMessage: '请选择是否是消防重点对象',
						}]
						// rules: [{
						// 	required: true,
						// 	errorMessage: '请输入检查地点',
						// }, {
						// 	//字符串格式，反斜杠要转义\\  开头结尾/ /省略  new RegExp("\\w+") 相当于  /\w+/
						// 	pattern: '^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
						// 	errorMessage: '身份证号码格式不正确',
						// }]
					},
					是否有医师执业证: {
						rules: [{
							required: true,
							format: 'string',
							errorMessage: '请选择是否有医师执业证',
						}]
					},
					// 医师执业证编号: {
					// 	rules: [{
					// 		validateFunction: (rule, value, data, callback) => {
					// 			if (this.params.个体诊所.是否有医师执业证 !== '1' || this.params.个体诊所.医师执业证编号.length !== 0) {									
					// 				// 通过返回 resolve
					// 				callback()
					// 			} else {
					// 				// 不通过返回 reject(new Error('错误信息'))
					// 				callback('请添加医师执业证编号')
					// 			}
					// 		}
					// 	}]
					// },
					资质有效期开始时间: {
						rules: [{
							required: true,
							errorMessage: '请填写经营资质有效期开始时间',
						}]
					},
					资质有效期结束时间: {
						rules: [{
							required: true,
							errorMessage: '请填写经营资质有效期结束时间',
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		created() {
			this.params.所属网格id = uni.getStorageSync('gridInfo').所属网格id
		},
		mounted() {
			that = this
		},
		methods: {
			binddata(name,value){
			   // 通过 input 事件设置表单指定 name 的值
			   this.$refs.form.setValue(name, value)
			},
			resetParams() {
				if(this.params.个体诊所.是否有医师执业证 === '2') {
					this.params.个体诊所.医师执业证编号 = []
				}
				// console.log(this.params.小餐饮店.是否有健康证)
			},
			handleClose(action) {
				if(action == 'confirm') {
					if(that.params.个体诊所.医师执业证编号.length === 0) {
						uni.showToast({
							title: '请添加至少一个证件号',
							icon: 'none'
						})
						return
					}
					that.binddata('医师执业证编号', that.params.个体诊所.医师执业证编号)
					that.showModal = false
				}else if(action == 'cancel') {
					that.showModal = false
					that.numItem = ''
					that.binddata('医师执业证编号', that.params.个体诊所.医师执业证编号)
				}
				console.log(action)
			},
			addNumber() {
				if(this.numItem.trim() == '') {
					uni.showToast({
						title: '请输入医师执业证编号',
						icon: 'none'
					})
					return
				}
				this.params.个体诊所.医师执业证编号.push(this.numItem)
				this.numItem = ''
			},
			deleteNum(index) {
				this.params.个体诊所.医师执业证编号.splice(index, 1)
			},
			getLocation(event) {
				this.params.lagitude = event.latitude
				this.params.longitude = event.longitude
				this.params.个体诊所.地址 = event.address
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					console.log(this.value1, '值')
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			submitForm(form) {
				console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					if(res.成立时间 !== null) {
						res.成立时间 = dayjs(this.params.个体诊所.成立时间).format('YYYY-MM-DDTHH:mm:ssZ')	
					}
					if(res.资质有效期开始时间 !== null) {
						res.资质有效期开始时间 = dayjs(this.params.个体诊所.资质有效期开始时间).format('YYYY-MM-DDTHH:mm:ssZ')
					}
					if(res.资质有效期结束时间 !== null) {
						res.资质有效期结束时间 = dayjs(this.params.个体诊所.资质有效期结束时间).format('YYYY-MM-DDTHH:mm:ssZ')	
					}
					res.从医人员数量 = res.从医人员数量 && parseInt(res.从医人员数量)
					res.工作区域面积 = res.工作区域面积 && parseFloat(res.工作区域面积)
					this.$emit('submit', Object.assign({},this.params,{个体诊所: res}))
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.install-container {
		padding-bottom: 90rpx;
	}
</style>


</style>
